<extend name="CarBase" />
<block name="body">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/Car/style.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/Car/Calculator/jijia.css" media="all">
<script type="text/javascript" src="__PUBLIC__/js/Car/Calculator/jquery-1.8.0.min.js"></script>

<div>

<!-- header start -->
<!-- 公用头 -->


<!-- header end -->

<div id="container">
<input id="hidCarID" type="hidden" value="0">
<input id="hidCarPrice" type="hidden" value="{$carprice}">
<input id="hidCarName" type="hidden" value="">
<input id="hidSeatNum" type="hidden">

<!-------页签导航开始------>
<div class="first-tags">
    <ul>
        <li>
            <a id="quankuanUrl"href="{:U('Calculator/PaidInFull',array('carprice'=>$carprice))}"><span>全款计算</span></a>
        </li>
        <li class="current">
            <a id="daikuanUrl" href="{:U('Calculator/Loan',array('carprice'=>$carprice))}"><span>贷款计算</span></a>
        </li>
        <li>
            <a id="baoxianUrl" href="{:U('Calculator/Insurance',array('carprice'=>$carprice))}"><span>保险计算</span></a>
        </li>
    </ul>
</div>
<!-----页签导航结束-------->

<div class="xj-form">
    <!--<a href="javascript:addCar();" class="xj-change-city">-->
        <!--<span>选择车款</span>-->
        <!--<strong id="select_carname" class="act"></strong>-->
    <!--</a>-->
    <div class="xj-user-info-box">
        <div class="xj-user-info">
            <span>裸车价格</span>
            <input id="luochePrice2" type="number" class="current" value="200000">
        </div>
    </div>
</div>


<div id="floatLayer" class="top_layer2 daikuan-top-layer font-small">
    <div class="four-box-list fout-box-w22">
        <p class="tit">首付</p>
        <p id="shoufu" class="cont">85,869</p>
    </div>
    <div class="four-box-list fout-box-w28">
        <p class="tit">月供(<strong id="yueShu">24</strong>个月)</p>
        <p id="yueGong" class="cont">6,230</p>
    </div>
    <div class="four-box-list fout-box-w20">
        <p class="tit">利息</p>
        <p id="liXi" class="cont">9,520</p>
    </div>
    <div class="four-box-list fout-box-w30">
        <p class="tit">总价</p>
        <p id="totalPrice" class="cont">235,389</p>
    </div>
</div>
<div id="layerdetail" class=" font-small">
    <div class="layer_detail">
        <ul>
            <li>裸车: <span id="luochePrice1">200,000</span></li>
            <li id="biYaoLi" class="w34">必要花费: <span id="biYaoHuaFei1">18,964</span></li>
            <li id="shangYeLi" class="w32">商业险: <span id="shangYeXian1">6,905</span></li>
        </ul>
    </div>
</div>
<div id="topFlag"></div>

<script type="text/javascript">
    var carName = $("#select_carname").text();
    //if (carName.length > 20) {
    //    $("#select_carname").attr("class", "act liahang");
    //}
    //手机大屏小屏判断
    var screenWidth = $(window).width();
    var layerClassName;
    if (screenWidth > 390) {
        $("#layerdetail").attr("class", "");
        $("#biYaoLi").attr("class", "");
        $("#shangYeLi").attr("class", "");
        layerClassName = "top_layer2 daikuan-top-layer";
        $("#floatLayer").attr("class", layerClassName);
    } else {
        $("#layerdetail").attr("class", " font-small");
        $("#biYaoLi").attr("class", "w34");
        $("#shangYeLi").attr("class", "w32");
        layerClassName = "top_layer2 daikuan-top-layer font-small";
        $("#floatLayer").attr("class", layerClassName);
    }
    $("#floatLayer div").eq(0).attr("class", "four-box-list fout-box-w22");
    $("#floatLayer div").eq(1).attr("class", "four-box-list fout-box-w28");
    $("#floatLayer div").eq(2).attr("class", "four-box-list fout-box-w20");
    $("#floatLayer div").eq(3).attr("class", "four-box-list fout-box-w30");

    $(function () {
        //jsq-top-layer
        $(document).scroll(function () {
            var top = $("#topFlag").offset().top;
            var scrollTop = $(this).scrollTop();
            // " jsq-top-layer"
            if (scrollTop >= top) {
                //$("#floatLayer").attr("class", "top_layer2 daikuan-top-layer font-small jsq-top-layer");
                $("#floatLayer").attr("class", layerClassName + " jsq-top-layer");
            }
            if (scrollTop < top) {
                //$("#floatLayer").attr("class", "top_layer2 daikuan-top-layer font-small");
                $("#floatLayer").attr("class", layerClassName);
            }
        });

        $("#luochePrice2").on("keyup input", function () {
            var carPrice = $(this).val();
            if (carPrice.length > 8) {
                carPrice = carPrice.substr(0, 8);
            }
            $("#luochePrice1").text(formatCurrency(carPrice));
            $("#luochePrice2").val(carPrice);
            $('#hidCarPrice').val(carPrice);
            setCalcToolUrl("caridAndPrice", $("#hidCarID").val());
            calcLoanValue();
            calcAutoLoanAll();
        });

        //$("#luochePrice2").on("blur", function () {
        //    $(this).attr("class", "");
        //});

        //$("#luochePrice2").on("focus", function () {
        //    $(this).attr("class", "current");
        //});
    });


</script>
<div class="xj-form mt15">
    <div class="xj-user-info-box jsq-user-nobg">
        <div class="xj-user-info">
            <span>首付比例</span>
            <div id="shoufuDiv" class="jsq-cho-box">
                <a href="javascript:void(0)"
                <if condition="$shoufu eq '30%'">
                    class="current"
                </if>
                   >30%</a>
                <a href="javascript:void(0)"
                <if condition="$shoufu eq '40%'">
                    class="current"
                </if>
                        >40%</a>
                <a href="javascript:void(0)"
                <if condition="$shoufu eq '50%'">
                    class="current"
                </if>
                        >50%</a>
                <a href="javascript:void(0)"
                <if condition="$shoufu eq '60%'">
                    class="current"
                </if>
                        >60%</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#shoufuDiv a").on("click", function () {
                $("#shoufuDiv a").attr("class", "");
                $(this).attr("class", "current");

                calcLoanValue();
                calcAutoLoanAll();
            });
        });
    </script>
    <div class="xj-user-info-box jsq-user-nobg">
        <div class="xj-user-info">
            <span>还款年限</span>
            <div id="yearDiv" class="jsq-cho-box jsq-cho-yaer">
                <a href="javascript:void(0)"
                <if condition="$year eq '5'">
                    class="current"
                </if>
                        >5</a>
                <a href="javascript:void(0)"
                <if condition="$year eq '4'">
                    class="current"
                </if>
                >4</a>
                <a href="javascript:void(0)"
                <if condition="$year eq '3'">
                    class="current"
                </if>
                        >3</a>
                <a href="javascript:void(0)"
                <if condition="$year eq '2'">
                    class="current"
                </if>
                        >2</a>
                <a href="javascript:void(0)"
                <if condition="$year eq '1'">
                    class="current"
                </if>
                        >1</a>
            </div>
        </div>
    </div>

    <div class="xj-user-info-box">
        <div class="xj-user-info">
            <span>贷款利率</span>
            <input id="loanRate" type="tel" class="current" value="{$loanRate}">
            <em class="baifenhao current">%</em>
        </div>
    </div>
    <div id="loanFlag"></div>
    <div id="loanLayer" class="jump-pop" style="display: none">
        <span>贷款上限为10%</span>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#yearDiv a").on("click", function () {
                $("#yearDiv a").attr("class", "");
                $(this).attr("class", "current");

                calcLoanValue();
                calcAutoLoanAll();
            });

            $("#loanRate").on("keyup input", function () {
                var loanRateValue = $(this).val();
                if (loanRateValue.length > 6) {
                    $(this).val(loanRateValue.substr(0, 6));
                }
                if (parseFloat(loanRateValue) > 10) {
                    var scrollTop = $(document).scrollTop();
                    var top = ($(window).height() - $("#topFlag").height() - 200) / 2;
                    $("#loanLayer").css({ 'z-Index': 999, 'top': (top + scrollTop) + "px" }).show();
                    calcLoanValue();
                    setTimeout(function () {
                        $("#loanLayer").hide();
                    }, 1000);
                } else {
                    calcAutoLoanAll();
                }
            });
        });
    </script>
</div>
<div class="jsq-jiange-box">
    <span class="left-tab">必要花费</span>
    <span class="right-tab">小计：<strong id="biYaoHuaFei2">18,964</strong></span>
</div>
<div class="xj-form">
    <div class="xj-user-info-box jsq-user-nobg">
        <div class="xj-user-info">
            <span>购置税</span>
            <strong id="gouZhiShui">17,094</strong>
        </div>
    </div>
    <a class="xj-change-city">
        <span>交强险</span>
        <strong id="jiaoQiangX" class="act" data-action="popup-ZuoWeiS">950</strong>
    </a>
    <a class="xj-change-city">
        <span>车船使用税</span>
        <strong id="cheChuanTax" class="act" data-action="popup-chechuan">420</strong>
    </a>
    <div class="xj-user-info-box jsq-user-nobg">
        <div class="xj-user-info">
            <span>上牌费用</span>
            <strong id="shangPai">500</strong>
        </div>
    </div>
</div>

<div class="jsq-jiange-box">
    <span class="left-tab">商业保险</span>
    <span class="right-tab">小计：<strong id="shangYeXian2">6,905</strong></span>
</div>

<div class="jsq-tt-first">
    <h3>推荐套餐</h3>
    <div class="jsq-tab-box">
        <a id="jibenX" href="javascript:void(0);" onclick="JiBenX()">基本险</a>
        <a id="jingjiX" href="javascript:void(0);" onclick="JingJiX()">经济险</a>
        <a id="quanX" href="javascript:void(0);" onclick="QuanX()">全险</a>
    </div>
</div>
<script type="text/javascript">
    //第三者责任险 车辆损失险 不计免赔
    function JiBenX() {
        $('#chkDiSanZheX').attr("class", checkedClass);
        $('#chkCheSunShiX').attr("class", checkedClass);
        $('#chkBuJiX').attr("class", checkedClass);

        $('#chkQuanCheX').attr("class", uncheckedClass);
        $('#chkBoLiX').attr("class", uncheckedClass);
        $('#chkZiRanX').attr("class", uncheckedClass);
        $('#chkEngineX').attr("class", uncheckedClass);
        $('#chkChengKeX').attr("class", uncheckedClass);
        $('#chkSiJiX').attr("class", uncheckedClass);
        $('#chkCheShenX').attr("class", uncheckedClass);

        calcLoanValue();
        calcAutoLoanAll();
    }
    //第三者责任险 车辆损失险 不计免赔 乘客坐位责任险 司机坐位责任险
    function JingJiX() {
        $('#chkDiSanZheX').attr("class", checkedClass);
        $('#chkCheSunShiX').attr("class", checkedClass);
        $('#chkBuJiX').attr("class", checkedClass);
        $('#chkChengKeX').attr("class", checkedClass);
        $('#chkSiJiX').attr("class", checkedClass);

        $('#chkQuanCheX').attr("class", uncheckedClass);
        $('#chkBoLiX').attr("class", uncheckedClass);
        $('#chkZiRanX').attr("class", uncheckedClass);
        $('#chkCheShenX').attr("class", uncheckedClass);
        $('#chkEngineX').attr("class", uncheckedClass);

        calcLoanValue();
        calcAutoLoanAll();
    }

    function QuanX() {
        $('#chkDiSanZheX').attr("class", checkedClass);
        $('#chkCheSunShiX').attr("class", checkedClass);
        $('#chkBuJiX').attr("class", checkedClass);
        $('#chkChengKeX').attr("class", checkedClass);
        $('#chkSiJiX').attr("class", checkedClass);
        $('#chkQuanCheX').attr("class", checkedClass);
        $('#chkBoLiX').attr("class", checkedClass);
        $('#chkZiRanX').attr("class", checkedClass);
        $('#chkCheShenX').attr("class", checkedClass);
        $('#chkEngineX').attr("class", checkedClass);

        calcLoanValue();
        calcAutoLoanAll();
    }
</script>
<div id="shangyeDiv" class="jsq-box">
    <ul>
        <li id="liDiSanZheX" class="jsq-item-click">
            <div id="chkDiSanZheX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">第三者责任险<span id="diSanZhePeiFu">赔付20万</span></div>
            <div id="diSanZheX" class="jsq-item-num" data-action="popup-DiSanZheX">1,270</div>
        </li>
        <li id="liCheSunX">
            <div id="chkCheSunShiX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">车辆损失险</div>
            <div id="cheSunShiX" class="jsq-item-num">2,185</div>
        </li>
        <li id="liBuJiX" class="">
            <div id="chkBuJiX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">不计免赔特约险</div>
            <div id="buJiX" class="jsq-item-num">691</div>
        </li>
        <li id="liQuanCheX" class="">
            <div id="chkQuanCheX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">全车盗抢险</div>
            <div id="quanCheX" class="jsq-item-num">1,100</div>
        </li>
        <li id="liBoLiX" class="jsq-item-click">
            <div id="chkBoLiX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">玻璃单独破碎险<span id="boLiPeiFu">国产玻璃</span></div>
            <div id="boLiX" class="jsq-item-num" data-action="popup-BoLiX">380</div>
        </li>
        <li id="liZiRanX" class="">
            <div id="chkZiRanX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">自燃损失险</div>
            <div id="ziRanX" class="jsq-item-num">300</div>
        </li>
        <li id="liEngineX" class="">
            <div id="chkEngineX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">涉水险/发动机特别损失险</div>
            <div id="engineX" class="jsq-item-num">109</div>
        </li>
        <li id="liCheShenX" class="jsq-item-click">
            <div id="chkCheShenX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">车身划痕险<span id="cheShenPeiFu">赔付5千</span></div>
            <div id="cheShenX" class="jsq-item-num" data-action="popup-CheShenX">570</div>
        </li>
        <li id="liSiJiX" class="jsq-item-click">
            <div id="chkSiJiX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">司机座位责任险<span id="sijiPeiFu">赔付2万</span></div>
            <div id="siJiX" class="jsq-item-num" data-action="popup-SiJiX">84</div>
        </li>
        <li id="liChengKeX" class="jsq-item-click">
            <div id="chkChengKeX" class="jsq-item-check jsq-item-checked"><span></span></div>
            <div class="jsq-item-txt">乘客座位责任险<span id="chengkePeiFu">赔付2万</span></div>
            <div id="chengKeX" class="jsq-item-num" data-action="popup-ChengKeX">216</div>
        </li>
    </ul>
    <p class="jsq-bot-txt">此结果仅供参考，实际费用以当地缴费为准</p>
</div>
<script type="text/javascript">
    $(function () {
        $("#shangyeDiv div[id^=chk]").on("click", function () {
            $(this).toggleClass("jsq-item-checked");

            calcLoanValue();
            calcAutoLoanAll();
        });
    });
</script>
</div>

<!--footer end----->

<script src="__PUBLIC__/js/Car/Calculator/iscroll-infinite.js"></script>
<script src="__PUBLIC__/js/Car/Calculator/popup.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/Car/Calculator/CarCalculator.js"></script>
<!-------车船弹出层------>
<div id="backCheChuan" class="leftmask leftmaskCheChuan" style="display: none;"></div>
<div id="cheChuanLayer" class="leftPopup popup-chechuan" data-back="leftmaskCheChuan" style="display: none; z-index: 10">
    <div class="swipeLeft swipeLeft-sub">
        <dl id="cheChuanDl" class="tt-list">
            <dd class="">
                <a>
                    <p id="item1">1.0L(含)以下</p>
                </a>
            </dd>
            <dd class="current">
                <a>
                    <p id="item2">1.0-1.6L(含)</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item3">1.6-2.0L(含)</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item4">2.0-2.5L(含)</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item5">2.5-3.0L(含)</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item6">3.0-4.0L(含)</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item7">4.0L以上</p>
                </a>
            </dd>
        </dl>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //右侧侧附加选择层
        (function () {
            var iscroll = false;
            $('[data-action=popup-chechuan]').rightSwipe({
                clickEnd: function (b) {
                    var $leftPopup = this;
                    if (b) {
                        var $back = $('.' + $leftPopup.attr('data-back'));
                        $back.touches({ touchstart: function (ev) { ev.preventDefault(); }, touchmove: function (ev) { ev.preventDefault(); } });
                        var $swipeLeft = $leftPopup.find('.swipeLeft');

                        if (!iscroll) {
                            iscroll = true;
                            $leftPopup.myScroll = new IScroll($swipeLeft[0], {
                                probeType: 1,
                                snap: 'dd',
                                momentum: true,
                                click: true
                            });
                        }
                    } else {
                        $leftPopup.myScroll.scrollTo(0, 0, 0, false);
                    }
                }
            });
        })();

        $("#cheChuanDl a").on("click", function () {
            $("#cheChuanDl dd").attr("class", "");
            $(this).parent().attr("class", "current");

            calcLoanValue();
            calcAutoLoanAll();
            $("#backCheChuan").trigger("close");
        });
    });
</script>

<!-------座位数弹出层------>
<div id="backZuoWei" class="leftmask leftmaskZuoWeiS" style="display: none;"></div>
<div class="leftPopup popup-ZuoWeiS" data-back="leftmaskZuoWeiS" style="display: none; z-index: 20">
    <div class="swipeLeft swipeLeft-sub">
        <dl id="zuoWeiSDl" class="tt-list">
            <dd class="current">
                <a>
                    <p id="item950">家用6座以下</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item1100">家用6座及以上</p>
                </a>
            </dd>
        </dl>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //右侧侧附加选择层
        (function () {
            var iscroll = false;
            $('[data-action=popup-ZuoWeiS]').rightSwipe({
                clickEnd: function (b) {
                    var $leftPopup = this;
                    if (b) {
                        var $back = $('.' + $leftPopup.attr('data-back'));
                        $back.touches({ touchstart: function (ev) { ev.preventDefault(); }, touchmove: function (ev) { ev.preventDefault(); } });
                        var $swipeLeft = $leftPopup.find('.swipeLeft');

                        if (!iscroll) {
                            iscroll = true;
                            $leftPopup.myScroll = new IScroll($swipeLeft[0], {
                                probeType: 1,
                                snap: 'dd',
                                momentum: true,
                                click: true
                            });
                        }
                    } else {
                        $leftPopup.myScroll.scrollTo(0, 0, 0, false);
                    }
                }
            });
        })();

        $("#zuoWeiSDl a").on("click", function () {
            $("#zuoWeiSDl dd").attr("class", "");
            $(this).parent().attr("class", "current");

            calcLoanValue();
            calcAutoLoanAll();
            $("#backZuoWei").trigger("close");
        });
    });
</script>

<!-------第三者责任险弹出层------>
<div id="backDiSanZhe" class="leftmask leftmaskDiSanZheX" style="display: none;"></div>
<div class="leftPopup popup-DiSanZheX" data-back="leftmaskDiSanZheX" style="display: none; z-index: 30">
    <div class="swipeLeft swipeLeft-sub">
        <dl id="diSanZheXDl" class="tt-list">
            <dd class="">
                <a>
                    <p id="item50000">5万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item100000">10万</p>
                </a>
            </dd>
            <dd class="current">
                <a>
                    <p id="item200000">20万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item500000">50万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item1000000">100万</p>
                </a>
            </dd>
        </dl>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //右侧侧附加选择层
        (function () {
            var iscroll = false;
            $('[data-action=popup-DiSanZheX]').rightSwipe({
                isclick: function () {
                    if ($("#chkDiSanZheX").attr("class") == checkedClass) {
                        return true;
                    } else {
                        return false;
                    }
                },
                clickEnd: function (b) {
                    var $leftPopup = this;
                    if (b) {
                        var $back = $('.' + $leftPopup.attr('data-back'));
                        $back.touches({ touchstart: function (ev) { ev.preventDefault(); }, touchmove: function (ev) { ev.preventDefault(); } });
                        var $swipeLeft = $leftPopup.find('.swipeLeft');

                        if (!iscroll) {
                            iscroll = true;
                            $leftPopup.myScroll = new IScroll($swipeLeft[0], {
                                probeType: 1,
                                snap: 'dd',
                                momentum: true,
                                click: true
                            });
                        }
                    } else {
                        $leftPopup.myScroll.scrollTo(0, 0, 0, false);
                    }
                }
            });
        })();

        $("#diSanZheXDl a").on("click", function () {
            $("#diSanZheXDl dd").attr("class", "");
            $(this).parent().attr("class", "current");

            calcLoanValue();
            calcAutoLoanAll();
            $("#backDiSanZhe").trigger("close");
        });
    });
</script>

<!-------玻璃单独破碎险弹出层------>
<div id="backBoLi" class="leftmask leftmaskBoLiX" style="display: none;"></div>
<div class="leftPopup popup-BoLiX" data-back="leftmaskBoLiX" style="display: none; z-index: 40;">
    <div class="swipeLeft swipeLeft-sub">
        <dl id="boLiXDl" class="tt-list">
            <dd class="current">
                <a>
                    <p id="P1">国产</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item0">进口</p>
                </a>
            </dd>
        </dl>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //右侧侧附加选择层
        (function () {
            var iscroll = false;
            $('[data-action=popup-BoLiX]').rightSwipe({
                isclick: function () {
                    if ($("#chkBoLiX").attr("class") == checkedClass) {
                        return true;
                    } else {
                        return false;
                    }
                },
                clickEnd: function (b) {
                    var $leftPopup = this;
                    if (b) {
                        var $back = $('.' + $leftPopup.attr('data-back'));
                        $back.touches({ touchstart: function (ev) { ev.preventDefault(); }, touchmove: function (ev) { ev.preventDefault(); } });
                        var $swipeLeft = $leftPopup.find('.swipeLeft');

                        if (!iscroll) {
                            iscroll = true;
                            $leftPopup.myScroll = new IScroll($swipeLeft[0], {
                                probeType: 1,
                                snap: 'dd',
                                momentum: true,
                                click: true
                            });
                        }
                    } else {
                        $leftPopup.myScroll.scrollTo(0, 0, 0, false);
                    }
                }
            });
        })();

        $("#boLiXDl a").on("click", function () {
            $("#boLiXDl dd").attr("class", "");
            $(this).parent().attr("class", "current");

            calcLoanValue();
            calcAutoLoanAll();
            $("#backBoLi").trigger("close");
        });
    });
</script>

<!-------车身划痕险弹出层------>
<div id="backCheShen" class="leftmask leftmaskCheShenX" style="display: none;"></div>
<div class="leftPopup popup-CheShenX" data-back="leftmaskCheShenX" style="display: none; z-index: 50;">
    <div class="swipeLeft swipeLeft-sub">
        <dl id="cheShenXDl" class="tt-list">
            <dd class="">
                <a>
                    <p id="item2000">2千</p>
                </a>
            </dd>
            <dd class="current">
                <a>
                    <p id="item5000">5千</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item10000">1万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item20000">2万</p>
                </a>
            </dd>
        </dl>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //右侧侧附加选择层
        (function () {
            var iscroll = false;
            $('[data-action=popup-CheShenX]').rightSwipe({
                isclick: function () {
                    if ($("#chkCheShenX").attr("class") == checkedClass) {
                        return true;
                    } else {
                        return false;
                    }
                },
                clickEnd: function (b) {
                    var $leftPopup = this;
                    if (b) {
                        var $back = $('.' + $leftPopup.attr('data-back'));
                        $back.touches({ touchstart: function (ev) { ev.preventDefault(); }, touchmove: function (ev) { ev.preventDefault(); } });
                        var $swipeLeft = $leftPopup.find('.swipeLeft');

                        if (!iscroll) {
                            iscroll = true;
                            $leftPopup.myScroll = new IScroll($swipeLeft[0], {
                                probeType: 1,
                                snap: 'dd',
                                momentum: true,
                                click: true
                            });
                        }
                    } else {
                        $leftPopup.myScroll.scrollTo(0, 0, 0, false);
                    }
                }
            });
        })();

        $("#cheShenXDl a").on("click", function () {
            $("#cheShenXDl dd").attr("class", "");
            $(this).parent().attr("class", "current");

            calcLoanValue();
            calcAutoLoanAll();
            $("#backCheShen").trigger("close");
        });
    });
</script>

<!-------司机座位责任险弹出层------>
<div id="backSiJi" class="leftmask leftmaskSiJiX" style="display: none;"></div>
<div class="leftPopup popup-SiJiX" data-back="leftmaskSiJiX" style="display: none; z-index: 60">
    <div class="swipeLeft swipeLeft-sub">
        <dl id="siJiXDl" class="tt-list">
            <dd class="">
                <a>
                    <p id="item10000">1万</p>
                </a>
            </dd>
            <dd class="current">
                <a>
                    <p id="item20000">2万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item30000">3万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item40000">4万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item50000">5万</p>
                </a>
            </dd>
        </dl>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //右侧侧附加选择层
        (function () {
            var iscroll = false;
            $('[data-action=popup-SiJiX]').rightSwipe({
                isclick: function () {
                    if ($("#chkSiJiX").attr("class") == checkedClass) {
                        return true;
                    } else {
                        return false;
                    }
                },
                clickEnd: function (b) {
                    var $leftPopup = this;
                    if (b) {
                        var $back = $('.' + $leftPopup.attr('data-back'));
                        $back.touches({ touchstart: function (ev) { ev.preventDefault(); }, touchmove: function (ev) { ev.preventDefault(); } });
                        var $swipeLeft = $leftPopup.find('.swipeLeft');

                        if (!iscroll) {
                            iscroll = true;
                            $leftPopup.myScroll = new IScroll($swipeLeft[0], {
                                probeType: 1,
                                snap: 'dd',
                                momentum: true,
                                click: true
                            });
                        }
                    } else {
                        $leftPopup.myScroll.scrollTo(0, 0, 0, false);
                    }
                }
            });
        })();

        $("#siJiXDl a").on("click", function () {
            $("#siJiXDl dd").attr("class", "");
            $(this).parent().attr("class", "current");

            calcLoanValue();
            calcAutoLoanAll();
            $("#backSiJi").trigger("close");
        });
    });
</script>

<!-------乘客座位责任险弹出层------>
<div id="backChengKe" class="leftmask leftmaskChengKeX" style="display: none;"></div>
<div class="leftPopup popup-ChengKeX" data-back="leftmaskChengKeX" style="display: none; z-index: 70;">
    <div class="swipeLeft swipeLeft-sub">
        <dl id="chengKeXDl" class="tt-list">
            <dd class="">
                <a>
                    <p id="item10000">1万</p>
                </a>
            </dd>
            <dd class="current">
                <a>
                    <p id="item20000">2万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item30000">3万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item40000">4万</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item50000">5万</p>
                </a>
            </dd>
        </dl>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //右侧侧附加选择层
        (function () {
            var iscroll = false;
            $('[data-action=popup-ChengKeX]').rightSwipe({
                isclick: function () {
                    if ($("#chkChengKeX").attr("class") == checkedClass) {
                        return true;
                    } else {
                        return false;
                    }
                },
                clickEnd: function (b) {
                    var $leftPopup = this;
                    if (b) {
                        var $back = $('.' + $leftPopup.attr('data-back'));
                        $back.touches({ touchstart: function (ev) { ev.preventDefault(); }, touchmove: function (ev) { ev.preventDefault(); } });
                        var $swipeLeft = $leftPopup.find('.swipeLeft');

                        if (!iscroll) {
                            iscroll = true;
                            $leftPopup.myScroll = new IScroll($swipeLeft[0], {
                                probeType: 1,
                                snap: 'dd',
                                momentum: true,
                                click: true
                            });
                        }
                    } else {
                        $leftPopup.myScroll.scrollTo(0, 0, 0, false);
                    }
                }
            });
        })();

        $("#chengKeXDl a").on("click", function () {
            $("#chengKeXDl dd").attr("class", "");
            $(this).parent().attr("class", "current");

            calcLoanValue();
            calcAutoLoanAll();
            $("#backChengKe").trigger("close");
        });
    });
</script>
<script type="text/javascript">
//贷款购车总花费 首付款+贷款所花总钱数
//贷款所花总钱数=月付款×还款年限×12
//比全款购车多花费=贷款所花总钱数+首付金额-裸车价格。
function calcLoanTotal() {
    var moneyMonthPayments = GetIntValue($("#yueShu").html()) * GetIntValue($("#yueGong").html());
    var totolCost = Math.round(GetIntValue($("#shoufu").html()) + moneyMonthPayments);
    $("#totalPrice").html(formatCurrency(totolCost));
}


function calcAutoLoanAll() {
    if ($('#hidCarPrice').val() != "0") {
        shangPai = 500;
        $("#shangPai").html("500");
    } else {
        shangPai = 0;
        $("#shangPai").html("0");
    }


    //购置税
    calcAcquisitionTax();
    //车船使用税
    CalculateVehicleAndVesselTax();
    //交强险
    calcCompulsory();
    //第三责任险
    calcTPL();
    //车辆损失险
    calcCarDamage();
    //不计免赔特约险
    calcAbatement();
    //全车盗抢险
    calcCarTheft();
    //玻璃单独破碎险
    calcBreakageOfGlass();
    //自燃损失险
    calcSelfignite();
    //涉水险/发动机特别损失险
    calcCarEngineDamage();
    //车身划痕险
    calcCarDamageDW();
    //司机座位责任险
    calcLimitofDriver();
    //乘客座位责任险
    calcLimitofPassenger();
    //必要花费小计
    calcEssentialCost();
    //商业保险小计
    calcCommonTotal();
    //首付款
    calcDownPayments();
    //月供
    calcMonthPayments();
    //计算总价
    calcLoanTotal();
    //格式化数字千位符
    //$("strong[id^='show_'],b[id^='show_']").html(function (index, html) { return formatCurrency(parseInt(html)) + "元"; });
}

var isHaveLoanRate = false;
function InitTagStatus() {
    var carid = getQueryString("carid");
    var carPrice = getQueryString("carprice");



    var shoufu = getQueryString("shoufu");
    if (shoufu) {
        $("#shoufuDiv a").attr("class", "");
        switch (shoufu) {
            case "30%":
                $("#shoufuDiv a").eq(0).attr("class", "current");
                break;
            case "40%":
                $("#shoufuDiv a").eq(1).attr("class", "current");
                break;
            case "50%":
                $("#shoufuDiv a").eq(2).attr("class", "current");
                break;
            case "60%":
                $("#shoufuDiv a").eq(3).attr("class", "current");
                break;
        }
    }
    else {
        $("#shoufuDiv a").eq(0).attr("class", "current");
    }
    var year = getQueryString("year");
    if (year) {
        $("#yearDiv a").attr("class", "");
        switch (year) {
            case "5":
                $("#yearDiv a").eq(0).attr("class", "current");
                $("#yearRate").val("6.31%");
                break;
            case "4":
                $("#yearDiv a").eq(1).attr("class", "current");
                $("#yearRate").val("6.4%");
                break;
            case "3":
                $("#yearDiv a").eq(2).attr("class", "current");
                $("#yearRate").val("6.4%");
                break;
            case "2":
                $("#yearDiv a").eq(3).attr("class", "current");
                $("#yearRate").val("6.65%");
                break;
            case "1":
                $("#yearDiv a").eq(4).attr("class", "current");
                $("#yearRate").val("6.65%");
                break;
        }
    }
    else {
        $("#yearDiv a").eq(3).attr("class", "current");
        $("#yearRate").val("6.4%");
    }
    var loanRate = getQueryString("loanRate");
    if (loanRate) {
        isHaveLoanRate = true;
        $("#loanRate").attr("value", loanRate);
    }
}

$("#luochePrice1").html(formatCurrency($("#hidCarPrice").val()));
//$("#luochePrice2").val(formatCurrency($("#hidCarPrice").val()));
$("#luochePrice2").attr("value", $("#hidCarPrice").val());

$("#diSanZheXDl dd").attr("class", "");
$("#diSanZheXDl dd").eq(2).attr("class", "current");

$("#cheShenXDl dd").attr("class", "");
$("#cheShenXDl dd").eq(1).attr("class", "current");

$("#siJiXDl dd").attr("class", "");
$("#siJiXDl dd").eq(1).attr("class", "current");

$("#chengKeXDl dd").attr("class", "");
$("#chengKeXDl dd").eq(1).attr("class", "current");
InitTagStatus();//有参数传递时

calcLoanValue();
calcAutoLoanAll();
</script>

</div>
</block>